<template>
    <div class="left-nav">
        <header>
            <img src="/public/img/leftnav-title.png" alt="">
            若依管理系统
        </header>
        <main>
            <span @click="changePage('/index')" :style="{color : ($route.name=='welcome'?'blue':'')}">
                <el-icon class="left-nav-icon"><HomeFilled /></el-icon>
                首页
            </span>
            <span @click="toSystem('/system')">
                <el-icon class="left-nav-icon"><Tools /></el-icon>
                系统管理
                <ArrowChange class="left-nav-arr" :arr-num="arrNum1=($route.name=='user'?1:arrNum1)"/>
            </span>
            <DropdownMenu1 :arr-num="arrNum1"/>
            <span @click="toMonitor('/monitor')">
                <el-icon class="left-nav-icon"><DataLine /></el-icon>
                系统监控
                <ArrowChange class="left-nav-arr" :arr-num="arrNum2=($route.name=='online'?1:arrNum2)"/>
            </span>
            <DropdownMenu2 :arr-num="arrNum2"/>
            <span @click="toTool('/tool')">
                <el-icon class="left-nav-icon"><Briefcase /></el-icon>
                系统工具
                <ArrowChange class="left-nav-arr" :arr-num="arrNum3=($route.name=='build'?1:arrNum3)"/>
            </span>
            <DropdownMenu3 :arr-num="arrNum3"/>
            <span @click="toAbout()">
                <el-icon class="left-nav-icon"><Position /></el-icon>
                若依官网
            </span>

        </main>
    </div>
</template>

<script setup>
import ArrowChange from './ArrowChange.vue';
import DropdownMenu1 from './DropdownMenu1.vue';
import DropdownMenu2 from './DropdownMenu2.vue';
import DropdownMenu3 from './DropdownMenu3.vue';
import { useRouter } from 'vue-router';
import { ref } from 'vue';
let arrNum1 = ref(0);
let arrNum2 = ref(0);
let arrNum3 = ref(0);
const router = useRouter();
function changePage(pageUrl){ 
    router.push({
        path: pageUrl,
    });
}
function toSystem(pageUrl) {
    router.push(pageUrl)
    arrNum1.value=(arrNum1.value==0?1:0)
}
function toMonitor(pageUrl) {
    router.push(pageUrl)
    arrNum2.value=(arrNum2.value==0?1:0)
}
function toTool(pageUrl) {
    router.push(pageUrl)
    arrNum3.value=(arrNum3.value==0?1:0)
}

function toAbout() {
    router.push('/about');   
}

</script>

<style scoped>
.left-nav{background-color: #304156; width: 240px; height: 950px;}
.left-nav header{margin: 20px 0; text-align: center; font-size: 20px; color: #fff; font-weight: 600;}
.left-nav header img{vertical-align: middle;}
main{height: 850px; overflow: auto;}
main::-webkit-scrollbar {width: 0px; height: 0px;}
/* 滚动条滑块（里面小方块） */
main::-webkit-scrollbar-thumb {border-radius: 10px; box-shadow: inset 0 0 5px rgba(0,0,0,0.2); background: rgba(0,0,0,0.2);}
/* 滚动条轨道 */
main::-webkit-scrollbar-track {border-radius: 0; box-shadow: inset 0 0 5px rgba(0,0,0,0.2); background: rgba(0,0,0,0.1);}
main span{display: block; color: #fff; background-color: #304156; padding: 20px; font-size: 18px; cursor: pointer;}
main span .left-nav-icon{vertical-align: middle; margin-right: 20px;}
main span .left-nav-arr{margin-left: 60px; display: inline-block;}
main span:hover{background-color: #2d3d51;}
</style>